<template>
    <div class="wrap">
        <div class="img-error clearfix">
            <img src="/static/img/erorr-404.jpg">
            <div class="msg">
                <p>提示：您可能输错了网址，或者网页已删除或不存在，系统将在<span style="color:red;">{{count}}</span>秒后返回上一页</p>
                <div class="btn">
                    <el-button type="info" style="margin-right:50px;" @click="$router.push({path:'/'})" size="medium">
                        返回首页
                    </el-button>
                    <el-button type="success" style="margin-left:50px;" @click="back()" size="medium">返回上一页</el-button>
                </div>
            </div>

        </div>
    </div>

</template>
<script type="text/javascript">
    export default{
        data(){
            return {
                count: 5,
                timer: false,
            }
        },
        methods: {
            back(){
                if (window.history.length <= 1) {
                    this.$router.push({path:'/'})
                    return false
                } else {
                    this.$router.go(-1)
                }
                setTimeout(() => {
                    this.$router.push({path:'/'})
                },500)
            }
        },
        mounted(){
            let setTime = setInterval(() => {
                this.count--
                if (this.count == 0) {
                    clearInterval(setTime)
                    this.back()
                }
            }, 1000)

        }
    }
</script>
<style scoped>
    .wrap {
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: #fff;
    }

    .img-error {
        width: 720px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -280px -360px;
    }

    .img-wrap {
        height: 400px;
        display: inline-block;
        vertical-align: middle;
    }

    .msg p {
        text-align: center;
        color: #a6a6a6;
        font-size: 14px;
    }

    .msg .btn {
        text-align: center;
        margin-top: 40px;
    }
</style>